<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Report Player Sample (Local)</title>

    <link rel="stylesheet" href="../../../../../dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="../../../../../esri/css/esri.css">

    <script>
        var dojoConfig = {
            async: true,
            locale: typeof dojoConfig !== 'undefined' && dojoConfig.locale || null,
            packages: [{
                name: 'dojo',
                location: './dojo'
            }, {
                name: 'dijit',
                location: './dijit'
            }, {
                name: 'dojox',
                location: './dojox'
            }, {
                name: 'dgrid',
                location: './dgrid'
            }, {
                name: 'dstore',
                location: './dstore'
            }, {
                name: 'put-selector',
                location: './put-selector'
            }, {
                name: 'xstyle',
                location: './xstyle'
            }, {
                name: 'esri',
                location: './esri'
            }, {
                name: 'moment',
                location: './moment'
            }]
        };
    </script>
    <script data-dojo-config="baseUrl: '../../../../..', isDebug: 1, waitSeconds: 60" src='../../../../../dojo/dojo.js'></script>

    <style>
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
            overflow: hidden;
            font-size: 13px;
            font-family: "Avenir Next";
        }
    </style>

    <script>

        require(["require", "esri/dijit/geoenrichment/nlsFix"],
            function (relativeRequire, nlsFix) {
                nlsFix.load(null, relativeRequire);

                require([
                    "dojo/when",

                    "esri/dijit/geoenrichment/ReportPlayer/ReportPlayer",
                    "esri/dijit/geoenrichment/ReportPlayer/PlayerResizeModes",
                    "esri/dijit/geoenrichment/ReportPlayer/PlayerThemes",
                    "esri/dijit/geoenrichment/ReportPlayer/DataProviderGE",
                    "esri/dijit/geoenrichment/ReportPlayer/PlayerCommands",
                    "esri/dijit/geoenrichment/ReportPlayer/samples/supportClasses/AnalysisAreas",
                    "esri/dijit/geoenrichment/utils/UrlUtil",
                    "esri/dijit/geoenrichment/utils/signIn/SignInHelper",

                    "dojo/domReady!"
                ],
               function (
                   when,

                   ReportPlayer,
                   PlayerResizeModes,
                   PlayerThemes,
                   DataProviderGE,
                   PlayerCommands,
                   AnalysisAreas,
                   UrlUtil,
                   SignInHelper
                   ) {

                   /*

                   INFO:

                   URL query parameters (case insensitive):
                       appId - Application ID.
                       portalUrl - URL of the ArcGIS Portal.
                       countryID - 2 charachter id of the country the report template data belongs to (e.g. US).
                       reportID - ID of the report template portal item.
                       proxy - URL of the proxy. Needed for printing and exporting the infographic when external resources need to be accessed (e.g. when printing a map).
                       analysisAreas - array of anaysis areas in json format (see DataProviderGE.js for more details about the format).
                       slidesView - true/false. Pass true if you want the player to be viewed as a pagination. Default false.
                       theme - "light", "dark". Default is "dark"

                       Example:

                       Case 1: Feature with geometry

                       .../ReportPlayerLocal.html?appId=g5vpmnaAyj9UmLKJ&portalUrl=https://www.arcgis.com&countryID=US&reportID=transportation-to-work-US&analysisAreas=[{"name":"Area name","shortName":"Area from url (short)","description":"Area description","address":"Area address","latitude":"Area Lat.","longitude":"Area Long.","feature":{"geometry":{"rings":[[[-10800107.01591563,3862641.714572819],[-10716918.351420047,4636712.237704219],[-9901669.439363334,4969050.952364072],[-9909988.305812893,4278585.037050734],[-10800107.01591563,3862641.714572819]]],"spatialReference":{"wkid":102100}},"attributes":{},"symbol":{"color":[200,50,50,50],"outline":{"color":[255,0,0,255],"width":1.5,"type":"esriSLS","style":"esriSLSSolid"},"type":"esriSFS","style":"esriSFSSolid"}}}]&slidesView=false&theme=light

                       OR

                       Case 2: only geography ids

                       .../ReportPlayerLocal.html?appId=g5vpmnaAyj9UmLKJ&portalUrl=https://www.arcgis.com&&countryID=US&reportID=transportation-to-work-US&analysisAreas=[{"name":"Area name","shortName":"Area from url (short)","description":"Area description","address":"Area address","latitude":"Area Lat.","longitude":"Area Long.", "geographies": [{"id":"32","levelId":"US.States"},{"id":"06","levelId":"US.States"}]}]&slidesView=false&theme=light
                   */

                   /* test: currently is referencing a report template from the content of user ak_prod. */

                   var DEFAULTS = {
                       appId: "g5vpmnaAyj9UmLKJ",
                       portalUrl: "https://www.arcgis.com",
                       countryID: "US",
                       reportID: "transportation-to-work-US",
                       slidesView: "false",
                       theme: PlayerThemes.DARK
                   };

                   //---------------------------------------------------------------------------
                   // QA
                   // override defaults
                   /*
                   DEFAULTS.portalUrl = "https://qaext.arcgis.com";
                   // QA
                   DEFAULTS.reportID = "5b2f40bf1a5c4ad1b27c75f375607754";
                   DEFAULTS.appId = "gzYR5C8WR8c0aRCH";
                   */
                   //---------------------------------------------------------------------------

                   function getUrlVar(name) {
                       var href = window.location.href;
                       return UrlUtil.getVariableValue(href, name) || DEFAULTS[name];
                   };

                   // parse url query parameters

                   var appId = getUrlVar("appId");
                   var portalUrl = getUrlVar("portalUrl");
                   var countryID = getUrlVar("countryID");
                   var reportID = getUrlVar("reportID");
                   var analysisAreasJson = getUrlVar("analysisAreas");
                   if (typeof analysisAreasJson === "string")
                       analysisAreasJson = JSON.parse(analysisAreasJson);
                   var isSlidesView = String(getUrlVar("slidesView")) === "true";
                   var theme = getUrlVar("theme");

                   esriConfig.defaults.io.proxyUrl = getUrlVar("proxy") || null;

                   //--------------------------------------------------------------------------
                   //
                   //  Methods: run player
                   //
                   //--------------------------------------------------------------------------

                   SignInHelper.signIn({
                       portalUrl: portalUrl,
                       appId: appId,
                       callback: function () {

                           var dataProvider = new DataProviderGE();
                           dataProvider.registerCommand(PlayerCommands.PDF);
                           dataProvider.registerCommand(PlayerCommands.IMAGE);
                           dataProvider.registerCommand(PlayerCommands.PRINT);
                           dataProvider.registerCommand(PlayerCommands.DYNAMIC_HTML);

                           var player = new ReportPlayer({
                               config: {
                                   esriDijitCssUrl: "",
                                   esriCssUrl: "",
                                   playerSourceRootUrl: ""
                               },
                               isSlidesView: isSlidesView,
                               theme: theme,
                               dataProvider: dataProvider,
                               resizeMode: PlayerResizeModes.FIT_WINDOW
                           }).placeAt(playerDiv);

                           var params = {
                               portalUrl: portalUrl,
                               countryID: countryID,
                               reportID: reportID,
                               analysisAreas: analysisAreasJson || AnalysisAreas.getAreas({
                                       numAreas: 1,
                                       big: false,
                                       isGeographyId: false,
                                       initialize: true
                                   })
                           };

                           when(player.playReport(params, {
                               waitUntilAllContentIsReady: true,
                               disableAnimation: false
                           }), function () {

                               //when(player.executeCommand(PlayerCommands.DYNAMIC_HTML, {
                               //    returnAsHtmlText: true
                               //}), function (htmlText) {
                               //    console.log(htmlText);
                               //});
                           });
                       }
                   });
               });
            });
    </script>
</head>
<body class="claro">
    <div id="playerDiv"></div>
</body>
</html>